<template>
  <el-dialog
    :title="exerciseTitle"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    fullscreen
    class="exercising"
  >
    <div class="exam webheart" v-if="dialogVisible">
      <div class="exam-scoll">
        <el-card class="box-card exam-wrap">
          <div
            class="exam-chapter-wrap"
            v-for="v in testExercisesList"
            :key="v.id"
          >
            <h2>{{ v.name }} </h2>
            <div class="question-wrap">
              <QuestionItem :testSubjectVO="v.testSubjects" @emit="setAnswer" />
            </div>
          </div>
        </el-card>
      </div>
      <ExerciseFooter
        :row="exercise"
        :answerCard="answerCard"
        :testPaperChapterList="testExercisesList"
        @closeDialog="dialogVisible = false"
      />
    </div>
  </el-dialog>
</template>
<script>
export default {
  components: {
    QuestionItem: () => import('@/views/Exam/QuestionItem.vue'),
    ExerciseFooter: () => import('./ExerciseFooter.vue'),
  },
  data() {
    return {
      dialogVisible: false,
      exercise: {},
      answerCard: [],
    }
  },
  computed: {
    exerciseTitle() {
      let title = this.exercise.exercisesType == 1 ? '常规练习' : '强化练习'
      return title + ' - ' + this.exercise.name
    },
    testExercisesList() {
      this.exercise.testExercisesList.forEach((item) => {
        item.testSubjects.forEach((v) => {
          this.$set(v, 'testSubjects', v)
        })
      })
      return this.exercise.testExercisesList
    },
  },
  mounted() {
    this.$bus.$on('showDialogExercising', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogExercising')
  },
  methods: {
    //显示弹窗
    init(row) {
      this.exercise = row
      this.dialogVisible = true
    },
    //设置答案
    setAnswer(obj) {
      this.answerCard = this.answerCard.filter((v) => v.id != obj.id)
      if (obj.subjectsType == 1) {
        obj.answer ? this.answerCard.push(obj) : ''
      } else if (obj.subjectsType == 2) {
        obj.answer.length ? this.answerCard.push(obj) : ''
      } else if (obj.subjectsType == 3) {
        obj.answer ? this.answerCard.push(obj) : ''
      } else if (obj.subjectsType == 4) {
        let flag = true
        obj.answer.forEach((item) => {
          if (!item.value) {
            flag = false
            return
          }
        })
        flag ? this.answerCard.push(obj) : ''
      } else if (obj.subjectsType == 5) {
        obj.answer ? this.answerCard.push(obj) : ''
      }
    },
  },
}
</script>
<style scoped lang="scss">
.exam {
  position: relative;
  height: calc(100vh - 125px);
  .exam-scoll {
    height: calc(100% - 150px);
    overflow-y: auto;
  }
}
.exam-title {
  text-align: center;
  font-size: 22px;
  color: #333;
  line-height: 2;
}
.exam-wrap {
  margin: 20px 0;
  .exam-chapter-wrap {
    h2 {
      color: #333;
      text-indent: 10px;
      background: #eee;
      height: 46px;
      line-height: 46px;
      span {
        color: #666;
        font-weight: normal;
        font-size: 14px;
      }
    }
  }
}
.answer-wrap {
  padding-left: 10px;
  background: #fafafa;
}
</style>
<style scoped>
.exercising >>> .el-dialog__body {
  padding-top: 0;
}
</style>